<template>
  <div>
    <button @click="show = !show">Taggle</button>
    <transition appear name="fade">
      <div v-if="show" class="fade">点击上面按钮查看动画</div>
    </transition>
  </div>
</template>
<script>
import { ref } from "vue";
export default {
  setup() {
    const show = ref(true);
    return {
      show,
    };
  },
};
</script>

<style scoped>
.fade {
  font-size: 20px;
  font-weight: 700;
  color: tomato;
}

/* 
fade-leave-to : 动画结束后的样式，原有样式 -->  结束样式
 解释：从原来的20大小，放大到50大小，并且把透明度设置为0，然后隐藏

fade-enter-from : 动画开始的样式，开始样式 -->  原有样式
 解释：从 50 大小并且透明为0的情况下，变回原来的20大小，然后显示出来
 */
.fade-leave-to,
.fade-enter-from {
  opacity: 0;
  font-size: 50px;
}

/* 
动画开始和结束的过度时间
 */
.fade-enter-active,
.fade-leave-active {
  transition: 0.4s ease;
}
</style>